<style lang="scss" scoped>
    .footer-wrap{
        .footer-content{
            position: fixed;
            background: #ffffff;
            bottom: 0;
            left:0;
            z-index: 11;
            width: 100%;
            height: 56px;
            box-shadow: 0 0.5px 2px 0 rgba(0,0,0,0.25); /*no*/
            display: flex;
            justify-content: space-around;
            .item{
                position: relative;
                &.active{
                    .item-name{
                        color: $bgColor;
                    }
                }
                .icon{
                    width: 100%;
                    height: 22px;
                    margin-top: 8px;
                }
                .item-name{
                    font-size: 12px; /*no*/
                    margin-top: 8px;
                }
                .num{
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    width: 18px;
                    height: 18px;
                    line-height: 18px;
                    background: #D0021B;
                    color: #ffffff;
                    font-size: 12px; /*no*/
                    border-radius: 100%;
                    text-align: center;
                }
            }
            .query{
                .icon{
                    background: url("/static/query.png") 50% 50% no-repeat;
                }
                &.active{
                    .icon{
                        background: url("/static/query-active.png") 50% 50% no-repeat;
                    }
                }
            }
            .price{
                .icon{
                    background: url("/static/price.png") 50% 50% no-repeat;
                }
                &.active{
                    .icon{
                        background: url("/static/price-active.png") 50% 50% no-repeat;
                    }
                }
            }
            .request{
                .icon{
                    background: url("/static/request.png") 50% 50% no-repeat;
                }
                &.active{
                    .icon{
                        background: url("/static/request-active.png") 50% 50% no-repeat;
                    }
                }
            }
            .plan{
                .icon{
                    background: url("/static/plan.png") 50% 50% no-repeat;
                }
                &.active{
                    .icon{
                        background: url("/static/plan-active.png") 50% 50% no-repeat;
                    }
                }
            }
        }
    }
</style>

<template>
    <div class="footer-wrap" v-show="showFooter">
        <div class="footer-content">
            <router-link to="{path:'/'}" class="item query" :class="{active: activeItem === 'query'}" v-if="!hasRequest">
                <div class="icon"></div>
                <p class="item-name">查找场地</p>
            </router-link>
            <router-link to="{path:'/'}" class="item price" :class="{active: activeItem === 'price'}" v-if="!hasRequest">
                <div class="icon"></div>
                <p class="item-name">方案询价</p>
                <span class="num" v-if="priceNum > 0">{{ priceNum | maxNum }}</span>
            </router-link>
            <router-link to="{path:'/'}" class="item request" :class="{active: activeItem === 'request'}" v-if="hasRequest">
                <div class="icon"></div>
                <p class="item-name">新需求</p>
                <span class="num" v-if="requestNum > 0">{{ requestNum | maxNum }}</span>
            </router-link>
            <router-link to="{path:'/'}" class="item plan" :class="{active: activeItem === 'plan'}">
                <div class="icon"></div>
                <p class="item-name">我的方案</p>
                <span class="num" v-if="planNum > 0">{{ planNum | maxNum }}</span>
            </router-link>
        </div>
    </div>
</template>

<script>

export default {
	computed: {},
    filters: {
        maxNum: function (value) {
            if (value < 99) return value
            return 99
        }
    },
    props: {
        showFooter: {   // footer 是否显示  首页kv处
            type: Boolean,
            default() {
                return true
            }
        },
		hasRequest: {      //底部菜单是否有需求 模块
			type: Boolean,
            default() {
				return false
            }
        },
        activeItem: {       //当前活跃的模块
            type: String,
            default() {
            	return ''
            }
        },
        priceNum: {      // 方案询价  数量
            type: Number,
            default() {
                return 0
            }
        },
        planNum: {    //我的方案数量
            type: Number,
            default() {
                return 0
            }
        },
        requestNum: {    //新需求数量
            type: Number,
            default() {
                return 0
            }
        }
    },
	data() {
		return {
        };
	},
	mounted() {
		
    },
	methods: {
    }
};
</script>

